<template>
    <div>
        <Card :bordered="false">
            <p slot="" style="height: 60%;">
                <Tabs type="card" :value="tabValue" @on-click="tabClick">
                    <TabPane label="基础配置" name="0">
                        <Form ref="formValidate" :label-width="100" style="margin-top: 20px;">
                            <FormItem label="网站LOGO">
                                <Upload ref="upload" name="file" :action="action_url" :show-upload-list="false"
                                    :headers="header" :format="['jpg', 'jpeg', 'png']" :on-format-error="handleFormatError"
                                    :on-success="handleSuccessLogo">
                                    <Button icon="ios-cloud-upload-outline">点击上传</Button>
                                </Upload>
                            </FormItem>
                            <FormItem>
                                <img :src="baseImgeUrl + sysInfo.logo" style="width: 100px;height: 100px;"
                                    v-show="sysInfo.logo">
                            </FormItem>
                            <FormItem label="客户默认头像">
                                <Upload ref="upload" name="file" :action="action_url" :show-upload-list="false"
                                    :headers="header" :format="['jpg', 'jpeg', 'png']" :on-format-error="handleFormatError"
                                    :on-success="handleSuccessUserLogo">
                                    <Button icon="ios-cloud-upload-outline">点击上传</Button>
                                </Upload>
                            </FormItem>
                            <FormItem>
                                <img :src="baseImgeUrl + sysInfo.customer_avatar" style="width: 100px;height: 100px;"
                                    v-show="sysInfo.customer_avatar">
                            </FormItem>

                            <FormItem label="浏览器图标">
                                <Row>
                                    <Upload ref="upload" name="file" :action="action_url" :show-upload-list="false"
                                        :headers="header" :format="['jpg', 'jpeg', 'png']"
                                        :on-format-error="handleFormatError" :on-success="handleSuccessFavicon">
                                        <Button icon="ios-cloud-upload-outline">点击上传</Button>
                                    </Upload>
                                    <span>系统在浏览器标签页显示的图标，favicon.ico文件</span>
                                </Row>
                            </FormItem>
                            <FormItem>
                                <img :src="baseImgeUrl + sysInfo.favicon_img" style="width: 100px;height: 100px;"
                                    v-show="sysInfo.favicon_img">
                            </FormItem>
                            <FormItem label="后台登录图">
                                <Upload ref="upload" name="file" :action="action_url" :show-upload-list="false"
                                    :headers="header" :format="['jpg', 'jpeg', 'png']" :on-format-error="handleFormatError"
                                    :on-success="handleSuccessLogin">
                                    <Button icon="ios-cloud-upload-outline">点击上传 尺寸：800*800</Button>
                                </Upload>
                            </FormItem>
                            <FormItem>
                                <img :src="baseImgeUrl + sysInfo.login_img" style="width: 100px;height: 100px;"
                                    v-show="sysInfo.login_img">
                            </FormItem>
                            <FormItem>
                                <Button type="primary" @click="handleSubmit('0')">保存</Button>
                            </FormItem>
                        </Form>
                    </TabPane>
                    <TabPane label="网站配置" name="1">
                        <Form ref="formValidate" :label-width="120" style="margin-top: 20px;">
                            <FormItem label="网站名称">
                                <Input v-model="sysInfo.name" placeholder="" style="width: 300px;"></Input>
                            </FormItem>
                            <FormItem label="网站描述">
                                <Input v-model="sysInfo.description" placeholder="" style="width: 300px;"></Input>
                            </FormItem>
                            <FormItem label="备案号">
                                <Input v-model="sysInfo.company_no" placeholder="" style="width: 300px;"></Input>
                            </FormItem>
                            <FormItem label="聊天间隔(秒)">
                                <Input v-model="sysInfo.chat_interval" placeholder="" style="width: 300px;"></Input>
                            </FormItem>
                            <FormItem label="未回复提醒(秒)">
                                <Input v-model="sysInfo.no_reply_interval" placeholder="" style="width: 300px;"></Input>
                            </FormItem>
                            <FormItem label="APP当前版本">
                                <Input v-model="sysInfo.version" placeholder="" style="width: 300px;"></Input>
                            </FormItem>
                            <!-- <FormItem label="APP更新地址">
                                <Input v-model="sysInfo.download_url" placeholder="" style="width: 300px;"></Input>
                            </FormItem> -->
                            <!-- <FormItem label="注册方式">
                                <RadioGroup v-model="sysInfo.regtype">
                                    <Radio label="1" border>开启注册</Radio>
                                    <Radio label="2" border>邀请注册</Radio>
                                </RadioGroup>
                            </FormItem>
                            <div v-if="sysInfo.regtype == 2">
                                <FormItem>
                                    <Input v-model="sysInfo.description" placeholder="" style="width: 300px;"></Input>
                                    <Button>复制链接</Button>
                                </FormItem>
                                <FormItem>
                                    邀请链接有效期：48小时
                                    <Button>重新生成</Button>
                                </FormItem>
                                <FormItem>
                                    <img :src="baseImgeUrl + sysInfo.logo" style="width: 100px;height: 100px;">
                                </FormItem>
                            </div>
                            <FormItem label="注册认证">
                                <RadioGroup v-model="sysInfo.regauth">
                                    <Radio label="0" border>关闭</Radio>
                                    <Radio label="1" border>手机号</Radio>
                                </RadioGroup>
                            </FormItem>
                            <FormItem label="开启IP定位">
                                <RadioGroup v-model="sysInfo.ipregion">
                                    <Radio label="0" border>关闭</Radio>
                                    <Radio label="1" border>开启</Radio>
                                </RadioGroup>
                            </FormItem>
                            <FormItem label="运行模式">
                                <RadioGroup v-model="sysInfo.runMode">
                                    <Radio label="1" border>企业模式</Radio>
                                    <Radio label="2" border>社区模式</Radio>
                                </RadioGroup>
                            </FormItem>
                            <FormItem label="绑定客服">
                                <RadioGroup v-model="sysInfo.isBindAdmin">
                                    <Radio label="1" border>开启</Radio>
                                    <Radio label="0" border>关闭</Radio>
                                </RadioGroup>
                            </FormItem>
                            <FormItem label="系统状态">
                                <RadioGroup v-model="sysInfo.state">
                                    <Radio label="1" border>开启</Radio>
                                    <Radio label="0" border>关闭</Radio>
                                </RadioGroup>
                            </FormItem>
                            <FormItem v-if="sysInfo.state == 0">
                                <div>
                                    关闭提示语：
                                </div>
                                <div>
                                    <Input v-model="sysInfo.closeTips" placeholder="" style="width: 300px;"></Input>
                                </div>
                            </FormItem> -->
                            <FormItem>
                                <Button type="primary" @click="handleSubmit('0')">保存</Button>
                            </FormItem>
                        </Form>
                    </TabPane>
                    <TabPane label="上传配置" name="2">
                        <Form ref="formValidate" :label-width="120" style="margin-top: 20px;">
                            <FormItem label="支持类型">
                                <Input v-model="fileUpload.fileExt" type="textarea" height="500px"></Input>
                                <Alert type="error">以英文逗号","分隔,否则报错</Alert>
                            </FormItem>
                            <FormItem label="限制大小(MB)">
                                <Input v-model="fileUpload.size" type="number"></Input>
                            </FormItem>
                            <FormItem>
                                <Button type="primary" @click="handleSubmit('2')">保存</Button>
                            </FormItem>
                        </Form>
                    </TabPane>
                    <!-- <TabPane label="聊天配置" name="2">
                        <Form ref="formValidate" :label-width="100" style="margin-top: 20px;">
                            <FormItem label="允许用户私聊">
                                <i-switch v-model="chatInfo.simpleChat" true-value="1" false-value="0" />
                                <span style="margin-left: 10px;">关闭后，用户将无法私聊</span>
                            </FormItem>
                            <FormItem label="允许用户建群">
                                <i-switch v-model="chatInfo.groupChat" true-value="1" false-value="0" />
                                <span style="margin-left: 10px;">关闭后，用户将无法创建群聊</span>
                            </FormItem>
                            <FormItem label="群聊最多人数">
                                <Input v-model="chatInfo.groupUserMax" style="width: 150px;" type="number"></Input>
                                <span style="margin-left: 10px;">人，0表示不限制</span>
                            </FormItem>
                            <FormItem label="开启在线状态">
                                <i-switch v-model="chatInfo.online" true-value="1" false-value="0" />
                                <span style="margin-left: 10px;">开启后，用户可以看到联系人的在线状态</span>
                            </FormItem>
                            <FormItem label="消息自动清理">
                                <div>
                                    <i-switch v-model="chatInfo.msgClear" true-value="1" false-value="0" />
                                    <span style="margin-left: 10px;">开启后，将会自动删除系统内的聊天记录</span>
                                </div>
                                <div v-if="chatInfo.msgClear == 1" style="margin-top: 10px;">
                                    <span style="margin-left: 10px;">消息最大保留天数</span>
                                    <Input v-model="chatInfo.msgClearDay" style="width: 150px;margin-left: 10px;"
                                        type="number"></Input>
                                    <span style="margin-left: 10px;">系统在每日凌晨2点自动清理该天数以前的消息</span>
                                </div>
                            </FormItem>
                            <FormItem label="音视频通话">
                                <div>
                                    <i-switch v-model="chatInfo.webrtc" true-value="1" false-value="0" />
                                    <span style="margin-left: 10px;">开启后，可以进行音视频通话，仅支持1对1音视频</span>
                                </div>
                                <div v-if="chatInfo.webrtc == 1" style="margin-top: 10px;">
                                    <span>stun服务器</span>
                                    <Input v-model="chatInfo.stun" style="width: 150px;margin-left: 10px;"></Input>
                                    <span style="margin-left: 10px;">音视频通话需要有Stun服务器才可以进行</span>
                                </div>
                                <div v-if="chatInfo.webrtc == 1" style="margin-top: 10px;">
                                    <span>stun用户名</span>
                                    <Input v-model="chatInfo.stunUser" style="width: 150px;margin-left: 10px;"></Input>
                                    <span style="margin-left: 10px;">如果是公开的则可以不埴写</span>
                                </div>
                                <div v-if="chatInfo.webrtc == 1" style="margin-top: 10px;">
                                    <span>stun密码</span>
                                    <Input v-model="chatInfo.stunPass" style="width: 150px;margin-left: 10px;"></Input>
                                    <span style="margin-left: 10px;">如果是公开的则可以不埴写</span>
                                </div>
                            </FormItem>

                            <FormItem>
                                <Button type="primary" @click="handleSubmit('2')">保存</Button>
                            </FormItem>
                        </Form>
                    </TabPane> -->
                </Tabs>
            </p>
        </Card>
    </div>
</template>
<script>
import config from "@/config";
import { getToken } from "../../libs/util";
import { Alert } from "view-design";
const baseUrl = process.env.NODE_ENV === "development" ? config.baseUrl.dev : config.baseUrl.pro;
const baseImgeUrl = process.env.NODE_ENV === "development" ? config.baseImgUrl.dev : config.baseImgUrl.pro;

export default {
    data() {
        return {
            action_url: baseUrl + "/admin/image/uploadAvatarFile",
            imgUrl: '',
            baseImgeUrl: baseImgeUrl,
            header: { Authorization: getToken() },
            tabValue: "0",
            sysInfo: {
                name: "",
                logo: "",
                regtype: "1",
                regauth: "1",
                ipregion: "1",
                runMode: "1",
                isBindAdmin: "1",
                state: "1",
                company_no: "",
                favicon_img: "",
                login_img: "",
                closeTips: "",
                customer_avatar: "",
            },
            chatInfo: {
                stun: "",
                online: "1",
                webrtc: "1",
                msgClear: "1",
                stunPass: "",
                stunUser: "",
                groupChat: "1",
                simpleChat: "1",
                msgClearDay: "1",
                groupUserMax: "0"
            },
            fileUpload: {
                size: "",
                fileExt: ""
            },
        };
    },
    methods: {
        tabClick(name) {
            this.tabValue = name;
            this.getConfigInfo(name);
        },
        getConfigInfo(name) {
            if (name == 2) {
                this.$axios('/admin/config/getConfigInfoByName', { name: 'fileUpload' }).then(res => {
                    this.fileUpload = res;
                    this.fileUpload.fileExt = this.fileUpload.fileExt.join(',');
                });
            }
            else {
                this.$axios('/admin/config/getConfigInfoByName', { name: 'sysInfo' }).then(res => {
                    this.sysInfo = res;
                });
            }
        },
        handleSubmit(name) {
            if (name == 0) {
                this.$axios('/admin/config/setSysInfo', this.sysInfo).then(res => {
                    this.$Message.success('保存成功');
                    this.getConfigInfo(name);
                });
            }
            else {
                this.fileUpload.fileExt = this.fileUpload.fileExt.split(',');
                this.$axios('/admin/config/setFileUpload', this.fileUpload).then(res => {
                    this.$Message.success('保存成功');
                    this.getConfigInfo(name);
                });
            }
        },
        //图片类型错误
        handleFormatError(file) {
            this.$Notice.warning({
                title: "文件格式错误",
                desc: "不支持该文件类型",
            });
        },
        //logo
        handleSuccessLogo(res, file) {
            let src = res.data.src;
            this.$set(this.sysInfo, 'logo', src);
        },
        handleSuccessUserLogo(res, file) {
            let src = res.data.src;
            this.$set(this.sysInfo, 'customer_avatar', src);
        },
        //Favicon
        handleSuccessFavicon(res, file) {
            let src = res.data.src;
            this.$set(this.sysInfo, 'favicon_img', src);
        },
        // 后台登录图
        handleSuccessLogin(res, file) {
            let src = res.data.src;
            this.$set(this.sysInfo, 'login_img', src);
        },
    },
    created() {
        this.getConfigInfo(this.tabValue);
    },
    components: { Alert }
}

</script>
<style>
.demo-upload-list {
    display: inline-block;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    margin-right: 4px;
}

.demo-upload-list img {
    width: 100%;
    height: 100%;
}

.demo-upload-list-cover {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, .6);
}

.demo-upload-list:hover .demo-upload-list-cover {
    display: block;
}

.demo-upload-list-cover i {
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
}
</style>
<style src="@wangeditor/editor/dist/css/style.css"></style>